<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>留言板</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
		$(document).ready(function () {
			// 直接发送 AJAX 请求
			$.ajax({
				url: '/message/getAllMessages', // 请求的 URL
				type: 'GET', // 请求类型
				dataType: 'json', // 预期的服务器响应的数据类型
				success: function (response) {
					if (response.code == 200) {
						var tbody = $('#tbody');
						$.each(response.data, function (index, message) {
							// 创建一个新的 tr 元素
							var tr = $('<tr></tr>');
							tr.append($('<td></td>').text(message.title));
							tr.append($('<td  class="message-content"></td>').text(message.content));
							tr.append($('<td class="timestamp"></td>').text(message.date));
							tr.append($('<input>', {
								type: 'hidden',
								value: message.id,
								name: 'messageid' // 可以添加一个 name 属性
							}));
							tr.append($('<input>', {
								type: 'hidden',
								value: message.userid,
								name: 'messageuserid' // 可以添加一个 name 属性
							}));
							// 将 tr 元素附加到 tbody 上
							tbody.append(tr);
						});
						// 为动态添加的 tr 元素绑定点击事件
						tbody.on('click', 'tr', function () {
							var messageuserid = $(this).find('input[name="messageuserid"]').val();
							var messageid = $(this).find('input[name="messageid"]').val();
							var content = $(this).find('.message-content').text();
							localStorage.setItem('content', content);
							localStorage.setItem('messageuserid', messageuserid);
							localStorage.setItem('messageid', messageid);
							window.location.href = 'message.html';
						});
					}
				},
			});
		});
	$(document).ready(function () {
		$('#search').submit(function (event) {
			event.preventDefault(); // 阻止表单的默认提交行为
			var formData = $(this).serialize();
			$.ajax({
				url: '/message/getMessageByTag', // 请求的 URL
				type: 'GET', // 请求类型
				data: formData,
				dataType: 'json', // 预期的服务器响应的数据类型
				success: function (response) {
					if (response.code == 200) {
						var tbody = $('#tbody');
						tbody.empty();
						$.each(response.data, function (index, message) {
							// 创建一个新的 tr 元素
							var tr = $('<tr></tr>');
							tr.append($('<td></td>').text(message.title));
							tr.append($('<td  class="message-content"></td>').text(message.content));
							tr.append($('<td class="timestamp"></td>').text(message.date));
							tr.append($('<input>', {
								type: 'hidden',
								value: message.id,
								name: 'messageid' // 可以添加一个 name 属性
							}));
							tr.append($('<input>', {
								type: 'hidden',
								value: message.userid,
								name: 'messageuserid' // 可以添加一个 name 属性
							}));
							// 将 tr 元素附加到 tbody 上
							tbody.append(tr);
						});
						// 为动态添加的 tr 元素绑定点击事件
						tbody.on('click', 'tr', function () {
							var messageuserid = $(this).find('input[name="messageuserid"]').val();
							var messageid = $(this).find('input[name="messageid"]').val();
							var content = $(this).find('.message-content').text();
							localStorage.setItem('content', content);
							localStorage.setItem('messageuserid', messageuserid);
							localStorage.setItem('messageid', messageid);
							localStorage.setItem('isself', true);
						});
					}
				},
			})
		});
	});
</script>
<body>
<div class="top">
	<h1>用户中心</h1>
	<div class="container">
		<div class="section">
			<a href="user.html">修改个人信息</a>
		</div>
		<div class="section">
			<a href="index.html">留言板</a>
		</div>
		<div class="section">
			<a href="user_index.html">个人主页</a>
		</div>
	</div>
</div>





<div class="body">
	<form action="" id="search">
		<div class="search-container">
			<span class="search-label">搜索</span>
			<input type="text" class="search-input" name="tag" placeholder="请输入搜索内容...">
			<div class="search-icon"></div>
		</div>
	</form>
	<table>
		<thead>
		<tr>
			<th>用户标题</th>
			<th>留言内容</th>
			<th>留言时间</th>
		</tr>
		</thead>
		<tbody id="tbody">
		</tbody>
	</table>
</div>
</body>
</html>